<template>
    <div>
      <!--头部-->
      <div class="top">
        <div class="top-left">
          <img @click="goback()" src="../../../static/bmqd/BMQD-1.png" alt="">
        </div>
        <span>{{title}}</span>
        <router-link to="/adddizhi">
          <p>添加新地址</p>
        </router-link>
      </div>

      <div class="con" v-if="bol">
        <div class="con-top">
          <img src="../../../static/shouhuodizhi/1.png" height="200" width="200"/>
        </div>
        <div class="con-bot">
          <router-link to="/adddizhi">
            <button class="btn">添加新地址</button>
          </router-link>
        </div>
      </div>

      <div v-else>
        <div class="con-info">
          <h3><span>李四</span><span>15034789543</span></h3>
          <p>河南省新乡市红旗区南干道与新中大道交叉口B座10楼102室； 邮编453000</p>
          <div class="con-info-wrap">
            <p class="con-info-left">
              <img src="../../../static/shouhuodizhi/2.png" alt="">
              <span>默认地址</span>
            </p>
            <p class="con-info-right">
              <span class="update"><img src="../../../static/shouhuodizhi/bianji.png" alt="">编辑</span>
              <span class="del"><img src="../../../static/shouhuodizhi/shanchu.png" alt="">删除</span>
            </p>
          </div>
        </div>

        <div class="con-info">
          <h3><span>李四</span><span>15034789543</span></h3>
          <p>河南省新乡市红旗区南干道与新中大道交叉口B座10楼102室； 邮编453000</p>
          <div class="con-info-wrap">
            <p class="con-info-left">
              <img src="../../../static/shouhuodizhi/2.png" alt="">
              <span>默认地址</span>
            </p>
            <p class="con-info-right">
              <span class="update"><img src="../../../static/shouhuodizhi/bianji.png" alt="">编辑</span>
              <span class="del"><img src="../../../static/shouhuodizhi/shanchu.png" alt="">删除</span>
            </p>
          </div>
        </div>
      </div>

    </div>
</template>

<script>

    export default {
        name: "Address",
      data(){
          return{
            title:'收货地址',
            bol:false,
          }
      },
      components:{

      },
      methods:{
          goback(){
            history.go(-1);
          }
      }
    }
</script>

<style scoped>
  .top{
    width: 69rem;
    height: 3rem;
    line-height: 3rem;
    padding: 3.5rem 1.5rem;
    background: #e53e42;
    display: flex;
    justify-content: space-between;
  }
  .top span{
    display: inline-block;
    width: 20rem;
    text-align: center;
    font-size: 36px;
    color: #fff;
  }
  .top-left{
    width: 20rem;
  }

  .top p{
    width: 20rem;
    font-size: 30px;
    color: #fff;
    text-align:right;
  }
  .top img{
    width: 3rem;
    height: 3rem;
  }


  .con{
    width: 35rem;
    height: 40rem;
    margin: 20rem auto;
    text-align: center;
  }
  .con .con-top{
    width: 100%;
    height: 24rem;
    background: #fff;
    padding-top:2rem ;
  }
  .con-top img{
    width: 21rem;
    height: 21rem;
  }
  .con .con-bot{
    width: 21rem;
    padding: 0 2rem;
    margin:0 auto;
  }
  .con-bot p{
    font-size: 24px;
    color: #808080;
    margin-bottom:2.5rem;
  }
  .con-bot .btn{
    width: 100%;
    height: 6rem;
    line-height: 6rem;
    color: #4d4d4d;
    font-size: 30px;
    border: 1px solid #4d4d4d;
    border-radius: 30px;
    background: #fff;
  }




  .con-info{
    width: 72rem;
    background: #fff;
    margin-bottom: 2rem;
  }
  .con-info h3{
    width:68rem;
    padding: 2rem;
  }
  .con-info h3 span{
    font-size: 28px;
    color: #666666;
  }
  .con-info h3 span:first-child{
    margin-right: 10rem;
  }
  .con-info>p{
    width: 68rem;
    padding:1rem 2rem;
    font-size: 24px;
    color: #808080;
  }

  .con-info-wrap{
    display: flex;
    justify-content: space-between;
    width: 68rem;
    padding: 2rem;
    border-top: 1px solid #ccc;
  }
  .con-info-left{
    height: 3.6rem;
  }
  .con-info-left img{
    width: 3.6rem;
    height: 3.6rem;
    vertical-align: bottom;
    margin-right: 1rem;
  }
  .con-info-left span{
    display: inline-block;
    font-size: 24px;
    color: #4d4d4d;
    height: 3.6rem;
    line-height: 3.6rem;
  }

  .con-info-right span{
    display: inline-block;
    font-size: 24px;
    color: #4d4d4d;
    height: 3.6rem;
    line-height: 3.6rem;
    margin-right: 2rem;
  }
  .con-info-right span img{
    width: 3.6rem;
    height: 3.6rem;
    vertical-align: bottom;
    margin-right: 1rem;
  }
</style>
